<!doctype html>
<html lang="en">

<%@ include file="Include_Professor_Imports.jsp"%>
<%@ include file="Include_Design_Table.jsp"%> 
<head>
	<script>
		var questionsRow = new Array();
		var examsRow = new Array();

		function checkForm()
		{
			var examName = document.getElementById("examName");
			var questions = document.getElementById("getid");
			var intExp = /^\d+$/;	
			var floatExp = /^[-+]?[0-9]+(\.[0-9]+)?$/;

			if (examName.value == '' || examName.value.indexOf('\\') !== -1 || examName.value.indexOf('\'') !== -1 || examName.value.indexOf('\"') !== -1)
			{
				alert('Please enter a valid Exam Name.');
				return false;
			} 
			if (questions.value == '')
			{
				alert('Questions are not read properly.');
				return false;
			} 
			return true;
		}
		function resetNewPracticeExamForm(){
			var examName = document.getElementById("examName");
			var questions = document.getElementById("getid");
			examName.value = "";
			questions.value = 0;
			questionsRow = new Array();
			var table = document.getElementById("questionTable");
			var tds = table.getElementsByTagName("td");
			for (var i = 0; i < tds.length; i++) {
			  tds[i].className = "unselected";
			}
			alert('Successful Reset of New Practice Exam Form');
		}
		
	</script>
</head>
<body>
<!-- HEADER -->
<div style="position: fixed; width: 100%; z-index: 1;">
<%@ include file="Include_Professor_Header.jsp"%>

<section id="secondary_bar">
<div class="user"><!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
</div>
<div class="breadcrumbs_container"><article class="breadcrumbs"><a
	href="ProfessorHomeServlet">Home</a>
<div class="breadcrumb_divider"></div>
<a class="current">Practice Exams</a></article></div>
</section>
<!-- end of secondary bar -->
</div>
<%@ include file="Include_Professor_Menu.jsp"%>

<section id="main" class="column">

<%@ include file="Include_Professor_Message.jsp"%>

<c:set var="questions" value="${requestScope.questions }"></c:set>
<c:set var="categories" value="${requestScope.categories}" ></c:set>

<div class="tablemodule" style="max-height: 400px; overflow: auto;">
<h5>Practice Exams <div>Search: <input name="filt" onKeyUp="filter2(this, 'examTable', '1')" type="text"></div></h5>
<table class="tablesorter" id="examTable" cellspacing="0">
	<thead>
		<tr>
			<th>Exam ID</th>
			<th>Exam Name</th>
			<th># of Items</th>
			<th>Categories</th>
		</tr>
	</thead>
	<tbody>
	
		<c:forEach items="${sessionScope.professor.exams}" var="exam" varStatus="i">
	
			<tr>
				<td><c:out value="${exam.examID }"/></td>
				<td><c:out value="${exam.examName }"/> </td>
				<td><c:out value="${exam.questions.size() }"/> </td>
				<td>
					<c:forEach items="${categories[i.index]}" var="category" varStatus="j" >
					
						<c:choose>
							<c:when test="${categories[i.index].size() eq j.count}">
								<c:out value="${ category }" />
							</c:when>
							<c:otherwise>
								<c:out value="${category}," />
							</c:otherwise>
						</c:choose>
			
					</c:forEach>
				</td>
			</tr>	
		
		</c:forEach>
	
	</tbody>
</table>

</div>
<form action="AddAndEditExamServlet?type=Practice" method="post">
	<!-- end of post new article -->
	<article class="module width_full">
		<header>
			<h3>New Practice Exam Form</h3>
		</header>
		<div class="module_content">
			<fieldset><label>Exam Name</label> <input type="text" name="examName" id="examName" >
			</fieldset>
		<div class="clear"></div>		
		
		<div class="tablemodule2" style="max-height: 400px;overflow: auto;">
			<h5>Questions <div>Search: <input name="filt" onKeyUp="filter2(this, 'questionTable', '1')" type="text"></div></h5>
			<table id="questionTable" class="tablesorter" cellspacing="0">
				<thead>
					<tr>
						<th>ID</th>
						<th>Question</th>
						<th>Category</th>
						<th>Type</th>
						<th>Answer</th>
						<th>Choices</th>
					</tr>
				</thead>
				<tbody>
				<c:forEach items="${questions}" var="questionObj">
					<tr onclick="multiplehighlight_6(this, objinput, questionsRow)">
						<td><c:out value="${questionObj.questionID }"/> </td>
						<td><c:out value="${questionObj.question }"/></td>
						<td><c:out value="${questionObj.category}"/></td>
						<td>
						<c:choose>
							<c:when test="${questionObj.getClass().getSimpleName() eq 'MultipleChoice'}">
								Multiple Choice
							</c:when>
							<c:otherwise>
								True or False
							</c:otherwise>
						</c:choose>
						</td>
						<td> <c:out value="${questionObj.answer }"/> </td>
						<td>
							<c:forEach items="${questionObj.choices}" var="choices" varStatus="i" >
							
								<c:choose>
									<c:when test="${questions.size() eq i.count}">
										<c:out value="${ choices }" />
									</c:when>
									<c:otherwise>
										<c:out value="${choices}," />
									</c:otherwise>
								</c:choose>
														
							</c:forEach>
						</td>
					</tr>
				</c:forEach>
				</tbody>
			</table>
			<input type="hidden" id="getid" name="examQuestions" value="0"/>
        	<script>var objinput = document.getElementById("getid");</script>
		</div>
		<a href="ProfessorViewQuestionServlet">Do you wish to add more questions?</a>
		<div class="spacer"></div>
		<div class="clear"></div>

		
		</div>
		<footer>
		<div class="submit_link"> <input type="submit" value="Create Exam" class="alt_btn"  onclick="return checkForm()"> 
			<input
			type="button" onclick="resetNewPracticeExamForm()" value="Reset"></div>
		</footer>
	</article>
	
	<!-- end of post new article -->
</form>


<div class="spacer"></div>
</section>


</body>

</html>